import { useState } from 'react'
import { 
  Input,
  InputGroup,
  InputLeftAddon,
  Button,
  useToast
} from '@chakra-ui/react'
import { FaUserAlt, FaLock, FaPhone } from 'react-icons/fa'
import axios from 'axios'

export default function SignUp() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [email, setEmail] = useState('')
  const toast = useToast()
  
  const handleChange = (e,type) => {
    switch(type){
      case 'email':
        setEmail(e.target.value);
        break
      case 'password':
        setPassword(e.target.value);
        break
      case 'username':
        setUsername(e.target.value);
        break;  
    }
  }
  const handleSubmit = async () => {
    const params = {
      user:{
        email,
        password,
        username
      }
    }
    const data = await axios.post('https://conduit.productionready.io/api/users',params)
    toast({
      title: "Success",
      description: "注册成功.",
      status: "success",
      duration: 9000,
      isClosable: true,
    })
  }
  return <form className="form">
    <InputGroup>
      <InputLeftAddon children={ <FaUserAlt /> } borderRadius="4px 0 0 0 " height="50px"/>
      <Input value={username} onChange={(e) => handleChange(e,'username')} placeholder="你的昵称" borderRadius="0 4px 0 0" padding="4px 12px 4px 35px" height="50px"/>
    </InputGroup>
    
    <InputGroup>
      <InputLeftAddon children={ <FaPhone /> } borderRadius="0 0 0 4px" height="50px"/>
      <Input value={email} onChange={(e) => handleChange(e,'email')} type="text" placeholder="手机号" borderRadius="0 0 4px 0" padding="4px 12px 4px 35px" height="50px"/>
    </InputGroup>

    <InputGroup>
      <InputLeftAddon children={ <FaLock /> } borderRadius="0 0 0 4px" height="50px"/>
      <Input value={password} onChange={(e) => handleChange(e,'password')} type="password" placeholder="设置密码" borderRadius="0 0 4px 0" padding="4px 12px 4px 35px" height="50px"/>
    </InputGroup>
    
    <Button width="100%" colorScheme="green" borderRadius="25px" mt="20px" onClick={handleSubmit}>注册</Button>
    
    <p className="sign-up-msg">
      点击 “注册” 即表示您同意并愿意遵守简书
      <br />
      <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a>
      和
      <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。
    </p>
  </form>
}